<template>
  <div class="headerSearch">
      <img src="../../static/image/logo.png" @click="toHome"/>
      <div class="search" @click="tosearch">
      <el-icon class="search-icon"><Search /></el-icon>
      <text>搜索 </text>
      </div>
    <button class="btn" @click="toApp">打开APP</button>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const toHome = () => {
  router.push({
    name:'Home'
  })
}
const tosearch = () => {
  router.push({
    name:'HotDay'
  })
}
const toApp = () => {
  router.push({
    name:'App'
  })
}
</script>

<style scoped lang="scss">
.headerSearch {
  height: 50px;
  padding: 15px 15px 5px;
  display: flex;
  box-sizing: border-box;
  background: #fff;
  img {
    height: 15px;
    width: 70px;
    margin: 10px 10px 0 5px;
  }
  .search {
    display: flex;
    height: 30px;
    font-size: 12px;
    color: #7e8c8d;
    background: #eff1f4;
    text-align: center;
    align-items: center;
    border-radius: 30px;
    flex-grow: 1;
    .search-icon {
      margin: 0 10px;
    }
  }
  .btn {
    width: 68px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    margin-left: 10px;
    padding: 8px 10px;
    border: 1px solid #f66847;
    border-radius: 15px;
    font-size: 12px;
    color: #f86442;
    text-align: center;
    background: #fff;
  }
}
</style>
